<template>
    <div class="box">
        <header class="header">
 <van-nav-bar right-text='消息'>
            <div slot="left">
<i class="iconfont icon-sao" style="font-size:0.9rem;color:#fff"></i>
                </div>
              <van-search
              slot="title"
              shape="round"
              background="#fe4542"
              @click="$router.push({name:'search'})"
              placeholder=" 打印机家用"
              disabled 
            />
                          
            <div slot="right">
<van-icon name="chat-o" size="0.9rem" color="#fff" />
                </div>
    </van-nav-bar>

</header>
        <div class="content" id="content">
          <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <!-- 轮播图 -->
          <van-swipe :autoplay="3000" indicator-color="white" style="border-radius: 0.5rem;">
  <van-swipe-item v-for="item of bannerlist" :key="item.bannerid">
    <van-image
  lazy-load
  :src="item.img"
  width="100%"
  height="4rem"
/>

  </van-swipe-item>
</van-swipe>
<!-- Prolist产品列表 -->
<Hotlist :hotlist="hotlist"></Hotlist>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <Prolist :prolist="prolist"></Prolist>
        </van-list>
</van-pull-refresh>
<div class="backtop" v-if="flag" @click="backtop">
<van-icon name="upgrade" size="0.8rem"/>
</div>
        </div>

    </div>
</template>
<script>
import Prolist from "@/components/Prolist.vue"
import Hotlist from "@/components/Hotlist.vue"
import { getBannerlist, getProlist } from '@/api'
import Vue from "vue"
import { NavBar, Search, Icon,Swipe, SwipeItem, Lazyload, Image, List, PullRefresh } from 'vant'
Vue.use(NavBar)
Vue.use(Search)
Vue.use(Icon)
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(Lazyload)
Vue.use(Image)
Vue.use(List)
Vue.use(PullRefresh)
export default {
  data () {
    return {
      bannerlist: [],
      prolist: [],
      hotlist: [],
      loading: false,
      finished: false,
      isLoading: false,
      flag: false, // 返回顶部出现标识
      count: 1 // 默认会添加第0页的数据，从1开始
    }
  },
  components: {
    Prolist,
    Hotlist
  }, // 局部注册组件
  beforeRouteLeave (to, from, next) {
 
  
     document.getElementById('content').removeEventListener('scroll', this.scrollTop)
     next()
  },
  mounted () {
    document.getElementById('content').addEventListener('scroll', this.handleScroll)
    getBannerlist().then(res => {
      // console.log(res)
      this.bannerlist = res.data.data
    })
    getProlist().then(res => {
      // console.log(res)
      // res.data.data.sort((a,b) => {
      //   return b.flag-a.flag
      // })
      this.prolist = res.data.data
      let arr= res.data.data.filter(item =>{
        return item.flag === 1
      })
      // console.log(arr)
      this.hotlist = arr
            // 数据填充完毕 -- 监听 、 绑定 滚轮滚动事件
      
    })
  },
    methods: {
    backtop () {
      document.getElementById('content').scrollTop = 0
    },
    handleScroll () {
      console.log('滚动')
      // 获取滚动条滚动的距离
      const scrollTop = document.getElementById('content').scrollTop
      // 判定返回顶部是不是要出现
      if (scrollTop > 500) {
        this.flag = true
      } else {
        this.flag = false
      }
    },
    onRefresh () {
      console.log('下拉刷新')
      this.isLoading = true
      getProlist().then(res => {
        this.isLoading = false // 刷新结束
        // 重置列表数据
        this.prolist = res.data.data
        // 重置页面以及 finished的值
        this.count = 1
        this.finished = false
      })
    },
          onLoad () {
      console.log('可以加载数据了')
      this.loading = true // 表示开始加载了
      getProlist({ limit: 10, count: this.count }).then(res => {
        this.loading = false // 表示结束加载了
        // 如果没有数据
        if (res.data.len === 0) { // res.data.data.length
          this.finished = true // 表示数加载完毕了
        } else {
          // 有数据 拼接数据  ---   合并数组
          // concat [...this.prolist, ...res.data.data]
          this.prolist = [...this.prolist, ...res.data.data]
          // 页面加1
          this.count += 1
        }
      })
    },
  

  }
}
</script>
<style lang="scss" scoped>
.header {

  .van-nav-bar, .van-hairline--bottom{
      background: #fe4542;
      height: 1.43rem;
  }
  .van-search{
    width:6.1rem
  }
}
.content {
    padding: 5px;
.backtop {
  position: fixed;
  right: 0.2rem;
  bottom: 1.5rem;
  width: 1rem;
  height: 1rem;
  background-color: #fff;
}
}
</style>
